<template>
  <div class="container">
    <Container>
      <!-- 面包屑 -->
      <div class="breadStyle" v-if="this.$route.query.name">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-row type="flex" justify="spance-between">
          <el-col :span="18">
            <!-- 表单区域 -->
            <el-form :inline="true" label-width="80px" :model="tagsFormData">
              <el-form-item label="标签名称">
                <el-input v-model="tagsFormData.tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="tagsFormData.state">
                  <el-option :label="'启用'" :value="1">启用</el-option>
                  <el-option :label="'禁用'" :value="0">禁用</el-option>
                </el-select>
              </el-form-item>
              <el-button size="small" @click="clearFn">清除</el-button>
              <el-button size="small" type="primary" @click="searchFn"
                >搜索</el-button
              >
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button
                type="text"
                icon="el-icon-back"
                @click="$router.back('/subjects/list')"
                v-if="this.$route.query.name"
                >返回学科</el-button
              >
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                style="display: inline-block"
                @click="addTagsFn"
                >新增标签</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </div>
      <DataDisplay :total="counts"></DataDisplay>
      <el-table :data="tagsList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="tagName" label="标签名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <span>{{ row.state | tagsStateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="openCloseBtn(row)">{{
              row.state === 0 ? '启用' : '禁用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state == 1"
              @click="editTagsFn(row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="delTagsFn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
      <!-- 新增标签弹出层 -->
      <TagsAdd
        :showTagsDialog.sync="showTagsAddDialog"
        @getTagsList="getTagsList"
        :title="addTitle"
        :subId="subId"
      ></TagsAdd>
      <!-- 修改标签弹出层 -->
      <TagsAdd
        :showTagsDialog.sync="showTagsEditDialog"
        @getTagsList="getTagsList"
        :title="editTitle"
        :id="editId"
        :subId="subId"
      ></TagsAdd>
    </Container>
  </div>
</template>

<script>
import DataDisplay from '@/components/DataDisplay'
import TagsAdd from '@/module-hmmm/components/tags-add'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
export default {
  components: {
    DataDisplay,
    TagsAdd
  },
  data () {
    return {
      tagsFormData: {
        tagName: '',
        state: ''
      }, // form表单数据
      page: {
        page: 1,
        pagesize: 10
      },
      counts: 0,
      tagsList: [], // 标签列表
      showTagsAddDialog: false, // 新增标签弹出层
      showTagsEditDialog: false, // 修改标签弹出层
      addTitle: '新增',
      editTitle: '修改',
      editId: null
    }
  },
  created () {
    this.getTagsList()
  },
  computed: {
    subId () {
      return this.$route.query.id
    }
  },
  watch: {
    $route () {
      this.getTagsList()
    }
  },
  methods: {
    // 清除按钮
    clearFn () {
      this.tagsFormData = {
        tagName: '',
        state: ''
      }
    },
    // 搜索功能
    searchFn () {
      this.getTagsList({ ...this.tagsFormData, ...this.page })
    },
    // 获取标签列表数据
    async getTagsList () {
      if (this.$route.query.name) {
        const { data } = await list({
          ...this.page,
          subjectID: this.$route.query.id
        })
        // console.log(data)
        this.tagsList = data.items
        this.counts = data.counts
        this.page.page = data.page * 1
        this.page.pagesize = data.pagesize * 1
      } else {
        const { data } = await list(this.page)
        // console.log(data)
        this.tagsList = data.items
        this.counts = data.counts
        this.page.page = data.page * 1
        this.page.pagesize = data.pagesize * 1
      }
    },
    // 分页功能
    handleSizeChange (val) {
      console.log(val)
      this.page.pagesize = val
      this.getTagsList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getTagsList()
    },
    // 新增标签按钮
    addTagsFn () {
      this.showTagsAddDialog = true
    },
    // 修改标签按钮
    async editTagsFn (id) {
      this.editId = id
      // console.log(id)
      this.showTagsEditDialog = true
    },
    // 删除功能
    delTagsFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
          this.getTagsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 启用禁用按钮
    async openCloseBtn (row) {
      const state = row.state === 0 ? 1 : 0
      await changeState({ id: row.id, state })
      this.$message.success('操作成功')
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang="less">
.breadStyle {
  padding: 18px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
</style>
